<template>
  <section class="page-container">
    <el-divider content-position="left">
      <section class="divider-wrap">
        <span>JSON编辑器</span>
        <el-popover
          placement="bottom-start"
          title=""
          :width="400"
          trigger="hover"
        >
          <p>
            JSON编辑器编辑通常用于JSON格式配置文件、例如oss配置资源场景。
            Json-Editor 基于
            <el-link
              href="https://github.com/codemirror/codemirror5"
              type="primary"
              target="_blank"
            >
              CodeMirrorr
            </el-link>
            插件开发， 验证基于
            <el-link
              href="https://github.com/codemirror/codemirror5/blob/master/addon/lint/json-lint.js"
              type="primary"
              target="_blank"
            >
              json-lint
            </el-link>。
          </p>
          <template #reference>
            <el-icon><info-filled /></el-icon>
          </template>
        </el-popover>
      </section>
    </el-divider>

    <section class="editor-wrap">
      <base-json-editor
        :model-value="defaultValue"
        @changed="handleChanged"
        @input="handleInput"
        @update:model-value="handleUpdate"
      />
    </section>
  </section>
</template>

<script lang="ts">
import { ref, defineComponent } from 'vue';

import { InfoFilled } from '@element-plus/icons-vue';

import BaseJsonEditor from '@/components/base-json-editor/index.vue';

const jsonData = {
  id: 1,
  name: '华东二区',
  selected: null,
  children: [
    {
      id: 1,
      name: '杭州滨江天街',
      selected: false,
      children: null,
    },
    {
      id: 11,
      name: '杭州金沙天街',
      selected: false,
      children: null,
    },
    {
      id: 16,
      name: '杭州西溪天街',
      selected: false,
      children: null,
    },
    {
      id: 21,
      name: '杭州紫荆天街',
      selected: false,
      children: null,
    },
    {
      id: 421,
      name: '杭州江东天街',
      selected: false,
      children: null,
    },
    {
      id: 425,
      name: '杭州丁桥天街',
      selected: false,
      children: null,
    }
  ],
};

export default defineComponent({
  components: {
    InfoFilled,
    BaseJsonEditor,
  },
  setup() {
    const defaultValue = ref(jsonData);

    const handleUpdate = () => {
      console.log('handleUpdate');
    };
    const handleInput = (ev: any) => {
      console.log('input handleInput', ev);
    };
    const handleChanged = (ev: any) => {
      console.log('changed handleChanged', ev);
    };

    return {
      defaultValue,
      handleUpdate,
      handleInput,
      handleChanged,
    };
  },
});
</script>

<style lang="scss" scoped>
:deep(.#{$namespace}-divider--horizontal) {
  margin-top: 16px;
  margin-bottom: 16px;
}

.divider-wrap {
  display: flex;
  align-items: center;

  .hover {
    cursor: pointer;
  }
}

.page-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;

  .editor-wrap {
    flex: 1;
  }
}

</style>
